import Vue from 'vue';
// 静态导入，在下面的代码运行前执行的（预编译），不能写在 if/for 分支循环中的
import VueRouter from 'vue-router';

// import Home from '@/views/Home.vue';
// import Login from '@/views/Login.vue';
// import Welcome from '@/views/Welcome.vue';
// import Users from '@/views/Users.vue';
// import Rights from '@/views/Rights.vue';
// import Roles from '@/views/Roles.vue';
// import GoodsCate from '@/views/GoodsCate.vue';
// import GoodsList from '@/views/GoodsList.vue';
// import GoodsParams from '@/views/GoodsParams.vue';
// import GoodsAdd from '@/views/GoodsAdd.vue';

// 路由懒加载：仅当访问该组件对应的路由地址时，才会调用这个函数，加载该页面组件代码
// 默认情况下，每个页面组件都会打包成单独的JS文件，如果配置了 /* webpackChunkName: "common" */ 可以进行分组打包
const Home = () => import(/* webpackChunkName: "common" */ '@/views/Home.vue');
const Login = () => import(/* webpackChunkName: "common" */ '@/views/Login.vue');
const Welcome = () => import(/* webpackChunkName: "common" */ '@/views/Welcome.vue');
const Users = () => import(/* webpackChunkName: "user" */ '@/views/Users.vue');
const Rights = () => import(/* webpackChunkName: "right_role" */ '@/views/Rights.vue');
const Roles = () => import(/* webpackChunkName: "right_role" */ '@/views/Roles.vue');
const GoodsCate = () => import(/* webpackChunkName: "goods" */ '@/views/GoodsCate.vue');
const GoodsList = () => import(/* webpackChunkName: "goods" */ '@/views/GoodsList.vue');
const GoodsParams = () => import(/* webpackChunkName: "goods" */ '@/views/GoodsParams.vue');
const GoodsAdd = () => import(/* webpackChunkName: "goods" */ '@/views/GoodsAdd.vue');

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    redirect: '/welcome',
    children: [
      { path: '/welcome', name: 'Welcome', component: Welcome },
      { path: '/users', name: 'Users', component: Users },
      { path: '/rights', name: 'Rights', component: Rights },
      { path: '/roles', name: 'Roles', component: Roles },
      { path: '/categories', name: 'GoodsCate', component: GoodsCate },
      { path: '/goods', name: 'GoodsList', component: GoodsList },
      { path: '/params', name: 'GoodsParams', component: GoodsParams },
      { path: '/goods/add', name: 'GoodsAdd', component: GoodsAdd },
    ],
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
  },
];

const router = new VueRouter({
  routes,
});

// to: 去哪里？
// from: 从哪里来？
// next: 通关文牒
// 全局前置路由守卫，所有路由在跳转时，都会先经过这个关卡
router.beforeEach((to, from, next) => {
  // console.log(to.path, from.path);

  if (to.path === '/login') {
    next();
  } else {
    const token = localStorage.getItem('token');
    if (token) {
      next();
    } else {
      next('/login');
    }
  }

  // // 如果，这哥们访问的不是登录页，那么，我们就要先判断一下这哥们是否有登录
  // if (to.path !== '/login') {
  //   const token = localStorage.getItem('token');
  //   // 如果没登录，就踢回去登录
  //   if (!token) {
  //     next('/login');
  //   } else {
  //     next();
  //   }
  // } else {
  //   // 如果登录了，就放行
  //   next();
  // }

  // // 错误优先判断，可以让代码逻辑更精简
  // // 如果访问的不是登录页  并且  没有token
  // if (to.path !== '/login' && !localStorage.getItem('token')) {
  //   // 那么，直接跳转到登录页
  //   return next('/login');
  // }
  // next();
});

export default router;
